<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import { TooltipComponent, TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// import axios from "axios";

echarts.use([PieChart, TooltipComponent, TitleComponent, CanvasRenderer]);

export default {
  name: 'StaticComponents',
  data() {
    return {
      chartInstance: null,
      option: {
        title: {
          text: '饼状数据图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: '数据详情',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    };
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.chart);
    this.chartInstance.setOption(this.option);
    // axios.post("/statistics", { keyword: "甲状腺" }, {
    //   headers: { 'Content-Type': 'application/json' }
    // }).then((res) => {
    //   let stringify = JSON.stringify(res.data.data);
    //   this.option.series[0].data = JSON.parse(stringify);
    //   this.chartInstance.setOption(this.option);
    // })
  },
  beforeUnmount() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  }
};
</script>